/*
//  BOOTSTRAP V5.X ADD
//
//  container-xxxl-1550.css
//  ==========================
//
//  Right, Kev, this shouldn't be needed, but it is.
//  
//  Bootstrap XXL is upto 1400px, but in 2021 
//
//  https://gs.statcounter.com/screen-resolution-stats/desktop/worldwide
//
//  10% of users had a 1536px wide monitor
//  06% of users had a 1400px wide monitor
//  04% of users had a 1600px wide monitor
//
//  That's 20% of users who will see the weird slightly off alignment
//
//  So new plan.
//  If over 1450px then set to 1450px so it already looks 'centered' 
//  for 1536/1600/1900px monitors
//
//  Look its a hack, but it makes a big difference on the wide-monitor. 
//
*/


@media (min-width: 1550px)
{

    .container-xxxl-1550 {
        max-width: 1450px !important;
    }

}

    
    .container-xxxl-1550 {
        max-width: 1450px !important;
    }
    

    /*
        I *should* just use a ".container" class...
        rather than copying it.
    */
    .container-xxxl-1550 {
        width: 100%;
        padding-right: var(--bs-gutter-x,.75rem);
        padding-left: var(--bs-gutter-x,.75rem);
        margin-right: auto;
        margin-left: auto;
    }

    /*
        This is actually a worse hack,
        but for the reasons above.
    */

    .container-xxl
    {
        max-width: 1450px !important;
    }